<template>
  <div id="forget">
    <div class="step">
      <div class="step-title">
        <svg-icon icon-class="security" />
        <span>安全验证</span>
      </div>
    </div>
    <div class="step">
      <div class="step-title">
        <svg-icon icon-class="findpwd" />
        <span>找回密码</span>
      </div>
    </div>
    <div class="step">
      <div class="step-title">
        <svg-icon icon-class="success" />
        <span>操作成功</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Forget"
  }
</script>

<style lang="scss" scoped>
  #forget {
    display: flex;
    .step {
      display: flex;
      align-items: center;
      .step-title {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px;
        .svg-icon {
          width: 45px;
          height: 45px;
        }
      }
    }
    .step::before, .step::after {
      content: "";
      width: 50px;
      height: 2px;
      background: #8a8a8a;
      display: inline-block;
    }
    .step:first-of-type::before,
    .step:last-of-type::after {
      width: 100px;
    }


    // .step::before, .step::after {
    //   content: "";
    //   flex: 1;
    //   width: 200px;
    //   border-bottom: 2px solid red;
    // }
    // .step-title {
    //   display: flex;
    //   flex-direction: column;
    //   align-items: center;
    //   position: relative;
    // }
  }
</style>